<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        section {
            width: 500px;
            margin: 0 auto;
            height: 520px;
            background-color: #EBEBEB;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: #323232;
            text-align: center;
            color: white;
            padding-top: 20px;
        }

        .last {

            background-color: pink;
            color: red;
        }

        footer {
            width: 470px;
            height: 120px;
            margin: 0 auto;
            border: 2px solid white;
            font-size: 18px;
            color: lightseagreen;
            text-align: center;
        }

        footer h3 {
            margin: 0;
        }
    </style>
</head>

<body>

    <section>
        <div>
            <span>1</span><br>
            <span>JUN</span>
        </div>
        <div>
            <span>2</span><br>
            <span>FEB</span>
        </div>
        <div>
            <span>3</span><br>
            <span>MAR</span>
        </div>
        <div>
            <span>4</span><br>
            <span>APR</span>
        </div>
        <div>
            <span>5</span><br>
            <span>MAY</span>
        </div>
        <div>
            <span>6</span><br>
            <span>JAN</span>
        </div>
        <div>
            <span>7</span><br>
            <span>JUL</span>
        </div>
        <div>
            <span>8</span><br>
            <span>AGU</span>
        </div>
        <div>
            <span>9</span><br>
            <span>SEP</span>
        </div>
        <div class="last">
            <span>10</span><br>
            <span>OCT</span>
        </div>
        <div>
            <span>11</span><br>
            <span>NOV</span>
        </div>
        <div>
            <span>12</span><br>
            <span>DEC</span>
        </div>

        <footer>
            <h3><strong>10</strong>月节日</h3>
            <p>国庆节：10月1日至7日放假7天。</p>
        </footer>
    </section>

</body>

</html>
<script>
    var divs = document.querySelector('section').querySelectorAll('div');
    var str = document.querySelector('footer strong');
    var p = document.querySelector('footer p');

    var values = [
        "元旦：1月1日至3日放假三天。",
        "春节：2月2日至8日放假7天。",
        "妇女节：3月8日妇女节，与我无关。",
        "清明节：4月3日至5日放假3天",
        "劳动节：4月30日至5月2日放假3天。",
        "端午节：6月4日至6日放假3天。",
        "小暑：7月7日小暑。不放假。",
        "七夕节：8月6日七夕节。不放假。",
        "中秋节：9月10日至12日放假3天。",
        "国庆节：10月1日至7日放假7天。",
        "立冬：11月8日立冬。不放假。",
        "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
    ];

    // for (var i = 0; i < divs.length; i++) {
    //     divs[i].index = i;
    //     divs[i].onmouseenter = function () {
    //         for (var i = 0; i < divs.length; i++) {
    //             divs[i].className = '';
    //         }
    //         this.className = 'last';
    //         str.innerHTML = this.index + 1;
    //         p.innerHTML = values[this.index];
    //     }

    // }
    var lastIndex = 9;
    for (var i = 0; i < divs.length; i++) {
        divs[i].index = i;
        divs[i].onmouseover = function(){
            divs[lastIndex].className = '';

            this.className = 'last';

        }
        divs[i].onmouseout = function () {
            lastIndex = this.index;
            str.innerHTML = this.index + 1;
            p.innerHTML = values[this.index];
        }
    }

</script>